// 查看图片并且带有切换图片的modal
<style lang="less" scoped>
</style>
<template>
  <Modal class="spe-modal" v-model="modal1" :mask-closable="false" width="1000" style="text-align:center;position: relative">
    <Icon type="md-arrow-back" style="font-size: 50px;position:absolute;top: 35%;left:5%;color: #CCC;cursor: pointer" @click.native="changeImge('left')"></Icon>
    <img :src="imgSrc" alt="" style="max-width: 100%;max-height: 750px;">
    <Icon type="md-arrow-forward" style="font-size: 50px;position:absolute;top: 35%;right:5%;color: #CCC;cursor: pointer" @click.native="changeImge('right')"></Icon>
  </Modal>
</template>
<script>
import { domain2 } from 'global/setting'
export default {
  data () {
    return {
      imgSrc: '',
      imgList: [],
      modal1: false,
      saveIndex: 0
    }
  },
  methods: {
    showImg (photos, i = 0) {
      this.imgList = photos
      this.saveIndex = 0
      if (photos.length == 0) {
        this.$Message.warning({
          content: '没有图片数据'
        })
      } else {
        this.modal1 = true
        setTimeout(() => {
          this.imgSrc = domain2 + photos[i]
        }, 50)
      }
    },
    changeImge (type) {
      if (type === 'left') {
        if (this.saveIndex !== 0) {
          this.imgSrc = domain2 + this.imgList[this.saveIndex - 1]
          this.saveIndex -= 1
        } else {
          this.$Message.warning({
            content: '这是第一张图片'
          })
        }
      } else if (type === 'right') {
        if (this.saveIndex === this.imgList.length - 1) {
          this.$Message.warning({
            content: '这是最后一张图片'
          })
        } else {
          this.imgSrc = domain2 + this.imgList[this.saveIndex + 1]
          this.saveIndex += 1
        }
      }
    }
  }
}
</script>
